<template>
  <div id="app">
    <h2>考试</h2>
    <button @click="disAll">{{ dis }}</button>
    <br />
    <span>所在城市：</span>
    <select v-model="city">
      <option
        v-for="(item, index) in cityList"
        :key="index"
        :value="item.name"
        :disabled="isTrue"
      >
        {{ item.name }}
      </option>
    </select>
    <br />
    <span>用户名：</span>
    <input type="text" v-model="userName" :disabled="isTrue" />
    <br />
    <span>年龄：</span>
    <input type="text" v-model="age" :disabled="isTrue" />
    <br />
    <button :disabled="isTrue" @click="add">{{ addBtn }}</button>
    <table border="1" style="border-collapse: collapse" width="800">
      <thead>
        <tr>
          <th></th>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>地区</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr align="center" v-for="(item, index) in goodsInfo" :key="index">
          <td>
            <input
              type="checkbox"
              :disabled="isTrue"
              :value="index"
              v-model="checkedArr"
            />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.userName }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
          <td>
            <button :disabled="isTrue" @click="change(index)">修改</button>
            <button :disabled="isTrue" @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button :disabled="isTrue" @click="delAll">删除所选</button>
  </div>
</template>

<script>
import cityList from "./assets/data.json";

export default {
  name: "App",
  data() {
    return {
      dis: "锁定",
      cityList: cityList.data,
      isTrue: false,
      userName: "",
      age: "",
      city: "",
      addBtn: "提交",
      goodsInfo: [],
      num: 1,
      currentIndex: 0,
      checkedArr: [],
      time: 4,
    };
  },
  methods: {
    // 添加方法
    add() {
      let obj = {
        id: this.num,
        userName: this.userName,
        age: this.age,
        city: this.city,
      };

      if (this.addBtn == "提交") {
        this.num++;
        this.goodsInfo.push(obj);
      } else {
        obj.id = this.goodsInfo[this.currentIndex].id;
        this.goodsInfo.splice(this.currentIndex, 1, obj);
        this.addBtn = "提交";
      }
      this.userName = "";
      this.age = "";
      this.city = "";
    },
    // 删除方法
    del(index) {
      this.goodsInfo.splice(index, 1);
    },
    // 修改操作
    change(index) {
      let data = this.goodsInfo[index];
      console.log(data);
      this.userName = data.userName;
      this.age = data.age;
      this.city = data.city;
      (this.addBtn = "确认修改"), (this.currentIndex = index);
    },
    // 删除所选
    delAll() {
      this.checkedArr
        .sort(function (a, b) {
          return b - a;
        })
        .forEach((item) => {
          this.goodsInfo.splice(item, 1);
        });
      this.checkedArr = [];
    },
    // 锁定与解锁
    disAll() {
      if (this.dis == "锁定") {
        this.isTrue = true;
        this.dis = "解锁";
      } else {
        let timer = setInterval(() => {
          this.time--;
          this.dis = this.time + "秒后解锁";

          if (this.time == 0) {
            this.isTrue = false;
            clearInterval(timer);
            this.dis = "锁定";
            this.time = 4;
          }
        }, 1000);
      }
    },
  },
};

// let user = {
// 	name:"zhangsan",
// 	age:18
// }

// console.log(user)

// let user1 = user
// let user2 = user
// let user3 = user

// user1.age = 20;

// console.log(user1.age);
// console.log(user2.age);
// console.log(user3.age);

// function usr () {
// 	return {
// 		name:"zhangsan",
// 		age:18
// 	}
// }

// let user4 = usr()
// let user5 = usr()
// let user6 = usr()
// console.log(user4);
// user4.age = 30;
// console.log(user4.age);
// console.log(user5.age);
// console.log(user6.age);
</script>

<style >
</style>